<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>{{ msg }}</div>
      <counter></counter>
      <counter></counter>
      <counter></counter>
      <counter></counter>
      <counter></counter>
      <counter></counter>
      <counter></counter>
      <counter></counter>
    </div>
    <script src="./js/vue.js"></script>
    <script>
      // 在VUE中如何注册一个组件？
      // 注册全局组件
      //  第一个参数：组件名称，规范（起名字时：用大驼峰命名）
      //  第二个参数：组件的配置对象
      Vue.component('Counter', {
        // HTML，也称为组件模板
        template: `
          <div>
            {{ msg }}
            <button @click="msg = 'haha'">改变msg</button>
          </div>
        `,
        // 组件内部的数据，
        // 为何要是一个函数？
        // 因为组件存在复用（存在多个实例），由于对象是一个复杂数据类型，在复用时多个实例指向同一个块内存地址
        data() {
          // 函数的返回值，就是最终的数据对象，每次使用组件时，函数都会执行，并返回一个新的对象
          // 这样在复用时，各组件之间的数据就互不影响了
          return {
            msg: '这是我们的第一个组件',
          };
        },
      });
      // 声明之后，如何使用组件？使用时：把名称改成小写短横线形式，作为标签使用。  比如：<counter></counter>

      // 默认情况下，组件内无法引用到外部的数据，组件内部的数据，外部也无法引用到，互相隔离

      var vm = new Vue({
        el: '#app',
        data: {
          msg: 'hehe',
        },
      });
    </script>
  </body>
</html>
